<template>
    <div class="audio" :style="{audioranFlag : 'bottom: -60px'}">
        <img :class="{ play: audioplay }"
            ref="imgs"
            :src="sings[audioIndex] ? sings[audioIndex].img : '../img/1.png'" alt=""
            @click="setaudioranFlag(true)"
        >
        <div>
            <h2>{{ sings[audioIndex] ? sings[audioIndex].name : '' }}</h2>
            <p>{{ sings[audioIndex] ? sings[audioIndex].title : '' }}</p>
        </div>
        <p>
            <i class="iconfont" v-if="!audioplay" @click="play">&#xe809;</i>
            <i class="iconfont" v-if="audioplay" @click="play">&#xe720;</i>
            <i class="iconfont" @click="$emit('popup')">&#xe812;</i>
        </p>       
        <audio :src="audioUrl"
            ref="audio" :autoplay="true"
            @ended="setindexaudio(type)"
            @canplaythrough="loadend"
            @timeupdate="dangTime"
        ></audio> 
    </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import { getSongList } from '@/api/recommend.js'
import { getSongsUrl } from '@/api/song.js'
export default {
    props: ['popup'],
    data(){
        return {
            flag: false,
            list: [],
            playList: [],
        }       
    },
    computed: {
        ...mapState(['item', 'sings', 'audioIndex', 'audioUrl', 'dtime', 'audioplay', 'audioranFlag', 'type']),        
    },
    watch: {
        audioplay(){
            if(this.audioplay){
                this.$refs.audio.play()
            }else{
                this.$refs.audio.pause()
            }
        },
        audioIndex(){
            this.getUrl([this.sings[this.audioIndex]])
            this.setaudioTime(this.$refs.audio.duration)           
        }
    },
    methods: {  
        ...mapMutations(['getAudiourl', 'setindexaudio', 'setaudioranFlag', 'setaudioTime', 'setdtime', 'setperc', 'setaudioplay']),
        play(){
            this.setaudioplay()           
        },
        async getUrl(arr){
            let res = await getSongsUrl(arr)
            this.getAudiourl(res[arr[0].mid])
        },
        loadend(){
            this.setaudioTime(this.$refs.audio.duration)           
        },
        dangTime(){
            this.setdtime(this.$refs.audio.currentTime)
            this.setperc({dtime:this.$refs.audio.currentTime, ztime:this.$refs.audio.duration}) 
        }        
    },
    mounted(){  
        this.getUrl([this.sings[this.audioIndex]]) 
        
    },       
}
</script>
<style lang="scss" scoped>
@keyframes run{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
    .audio{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60px;
        padding: 0 20px;
        justify-content: space-between;
        background: #333333;
        display: flex;
        align-items: center;
        z-index: 2;
        transition: .3s linear;
        img{
            width: 40px;
            height: 40px;
            border-radius: 50%;
            animation: run 10s linear infinite; 
            border: none; 
            margin-right: 5px;          
            &.play{
               animation-play-state: paused; 
            }            
        }
        h2{
            font-size: 14px;
            color: #ffffff;
            margin-bottom: 2px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        p{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 12px;
            color: hsla(0,0%,100%,.3);
        }
        div{
            width: 205px;
            height: 42px;
        }
        i.iconfont{
            color: #ffcd32;
            font-size: 32px;
            &:last-child{
                margin-left: 20px;
            }
        }
    }
</style>